<template>
	<view class="body">
		<view class="sel-body">
			<view class="sel-title">选择日期</view>
			<view class="sel-time-list flex align-center flex-wrap">
				<view class="sel-time" v-for="(item,index) in timeArr" :key="index" @tap="selTime(index)">
					<view class="sel-time-child" :class="(timeType == index)?'sel-time-child-active':''">{{item}}</view>
				</view>
				<view class="zdy-time-show flex align-center" v-if="timeType == 3">
					<view class="zdy-time" @tap="selTime(3)">{{mxDatePicker.value[0]?mxDatePicker.value[0]:'请选择开始日期'}}</view>
					<view class="split">-</view>
					<view class="zdy-time" @tap="selTime(3)">{{mxDatePicker.value[1]?mxDatePicker.value[1]:'请选择结束日期'}}</view>
				</view>
			</view>
		</view>
		<view class="sel-body" v-if="excelType == 2">
			<view class="sel-title">汇总方式</view>
			<view class="sel-radio flex align-center flex-wrap">
				<radio-group @change="fileTypeChange" class="flex align-center flex-wrap">
					<label class="username-radio-label flex align-center " v-for="(item, index) in fileTypeList" :key="index">
						<view>
							<radio class="username-radio-c" :value="index" :checked="fileTypeIndex == index" />
						</view>
						<view class="sel-radio-desc">{{item}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="sel-body" v-if="excelType == 2">
			<view class="sel-title">命名方式</view>
			<view class="sel-radio flex align-center flex-wrap">
				<view class="mm-type" v-if="zipNameStr != ''">导出时将以<text>{{zipNameStr}}</text>命名</view>
				<checkbox-group @change="zipNameChange" class="flex align-center flex-wrap">
					<label class="username-radio-label flex align-center" v-for="(item, index) in zipNameList" :key="index">
						<view>
							<checkbox class="username-radio-c" :value="item.type" :checked="zipNameKey.indexOf(item.type) > -1"/>
						</view>
						<view class="sel-checkbox-desc">{{item.title}}</view>
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="zhanwei"></view>
		<view class="sub-button-list">
			<view class="sub-button fabu" @tap="createExcel">确定</view>
		</view>
		
		<mx-date-picker :show="mxDatePicker.showPicker" :type="mxDatePicker.type" :value="mxDatePicker.value" :show-tips="true"
		:show-seconds="false" @confirm="DatePickerEnd" @cancel="DatePickerEnd" />
	</view>
	
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components:{
			MxDatePicker,
		},
		data() {
			return {
				s_id:0,
				excelType:0,
				mxDatePicker:{
					showPicker: false,
					type: 'rangetime',
					value: [],
				},
				timeType:0,
				timeArr:[
					'全部','今天','昨天','自定义'
				],
				fileTypeIndex:0,
				fileTypeList:[],
				zipNameList:[],
				zipNameListByKey:{},
				zipNameStr:'',
				zipNameKey:[]
			}
		},
		
		methods: {
			selTime(index){
				this.timeType = index;
				if(index == 3)
				{
					this.mxDatePicker.showPicker = true;
				}
			}, 
			fileTypeChange(e){
				this.fileTypeIndex = e.detail.value;
			},
			zipNameChange(e){ 
				var that = this;
				this.zipNameKey = e.detail.value;
				if(this.zipNameKey.length > 0)
				{
					var appendXh = false;
					var zipNameArr = [];
					var checkSxuhao = this.zipNameKey.indexOf('s_xuhao');
					if(checkSxuhao > -1)
					{
						this.zipNameKey.splice(checkSxuhao,1);
						this.zipNameKey.unshift('s_xuhao');
					}
					this.zipNameKey.forEach(item=>{
						zipNameArr.push(this.zipNameListByKey[item]);
					})
					this.zipNameStr = zipNameArr.join('-');
				}else{
					this.zipNameStr = '';
				}
			},
			createExcel(){
				var that = this;
				if(that.s_id < 1)
				{
					that.$api.msg('缺少必要参数');return ;
				}
				if(that.timeType == 3)
				{
					if(that.mxDatePicker.value.length < 2)
					{
						that.$api.msg('请选择开始时间和结束时间');return ;
					}
				}
				if(that.excelType == 2)
				{
					if(that.zipNameKey.length <1)
					{
						that.$api.msg('至少选择一种命名方式');return ;
					}
				}
				that.$api.loadingMsg('正在生成');
				that.$http.post('statistics/createExcel',{
					s_id:that.s_id,
					timeType:that.timeType,
					time:that.mxDatePicker.value,
					excelType:that.excelType,
					fileType:that.fileTypeIndex,
					zipNameKey:that.zipNameKey
				}).then(res=>{
					that.$api.msg(res.msg);
					if(res.code == 1)
					{
						setTimeout(function(){
							uni.redirectTo({
								url:'/pages/form/statistics/list-export-log?s_id='+that.s_id
							})
						},1000)
					}
				})
			},
			DatePickerEnd(e){
				if(e.value)
				{
					this.mxDatePicker.value = e.value;
					this.mxDatePicker.showPicker = false;
				}else{
					this.mxDatePicker.showPicker = false;
				}
			},
			zipNameInit(){
				var that = this;
				that.$http.post('statistics/zipNameInit',{
					s_id:that.s_id,
					excelType:that.excelType
				}).then(res=>{
					if(res.code == 1)
					{
						that.fileTypeList = res.data.fileTypeList;
						that.zipNameList = res.data.zipname;
						that.zipNameList.forEach(item=>{
							that.zipNameListByKey[item.type] = item.title;
						})
					}
				})
			}
		},
		onLoad(params) {
			//params.s_id = 19;
			if(params.s_id)
			{
				this.s_id = params.s_id;
			}
			if(params.excelType)
			{
				this.excelType = params.excelType;
			}
			this.zipNameInit();
		},
	}
</script>

<style lang="scss">
	.sub-button-list{
		position: fixed;
		width: 100%;
		bottom: 50rpx;
		left: 0;
		.sub-button{
			letter-spacing: 2rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			border-radius: 50rpx;
			text-align: center;
		}
		.fabu{
			width: 94%;
			background: $uni-btn-color;
			margin-left: 3%;
			color:#FFFFFF;
		}
	}
.body{
	padding: 20rpx;
	background: #ffffff;
	min-height: 600rpx;
	.sel-body{
		.sel-radio{
			.mm-type{
				margin: 20rpx 10rpx 0rpx 10rpx;
				text{
					color: #65A788;
					margin: 0 10rpx;
				}
			}
			.username-radio-label{
				width: 100%;
				margin-top: 16rpx;
				font-size: 28rpx;
				.username-radio-c{
					transform:scale(0.7);
					margin-right: 10rpx;
				}
				.sel-radio-desc{
					color: #1E1E1E;
				}
				.sel-checkbox-desc{
					color: #4D4D4D;
				}
			}
		}
		.sel-title{
			font-size: 32rpx;
			font-weight: bold;
			padding: 20rpx 0 10rpx 0;
		}
		.sel-time-list{
			padding-top: 20rpx;
			.zdy-time-show{
				height: 80rpx;
				color: #65A788;
				.zdy-time{
					height: 60rpx;
					width: 320rpx;
					text-align: center;
					line-height: 60rpx;
					background: #E8F8F1;
					font-size: 26rpx;
				}
				.split{
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
				}
			}
			.sel-time{
				width: 25%;
				height: 80rpx;
				.sel-time-child{
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					background: #E8F8F1;
					width: 90%;
					margin-left: 5%;
					font-size: 24rpx;
					border-radius: 16rpx;
				}
				.sel-time-child-active{
					color: #ffffff;
					background: $uni-btn-color;
				}
			}
		}
		
	}
}
</style>
